<template>
    <div class="app-container">
        <el-form class="lookForm" :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="140px">
            <el-form-item label="岗位名称" prop="postName">
                <el-input v-model="queryParams.postName" placeholder="请输入岗位名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="设岗部门" prop="deptName">
                <el-input v-model="queryParams.deptName" placeholder="请输入设岗部门" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- <el-form-item label="审核状态" prop="applyStatus">
                <el-select v-model="queryParams.applyStatus" placeholder="请选择审核状态" clearable>
                    <el-option v-for="dict in dict.type.qgzx_apply_status" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item> -->
            <el-form-item label="结算月份" prop="applyTime">
                <el-date-picker clearable v-model="queryParams.applyTime" type="month" value-format="yyyy-MM-dd"
                    placeholder="请选择结算月份">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button size="mini" plain type="success" icon="el-icon-plus" @click="addVClick">薪资填报</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button size="mini" plain type="success" icon="el-icon-finished"
                    @click="manyVClick">批量薪资填报</el-button>
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="tableData">
            <el-table-column label="#" align="center" prop="id" />
            <el-table-column label="学号" align="center" prop="stuNo" />

            <el-table-column label="姓名" align="center" prop="stuName" />
            <el-table-column label="学院" align="center" prop="stuDept" />

            <el-table-column label="岗位名称" align="center" prop="postName" />
            <el-table-column label="设岗部门" align="center" prop="deptName" />
            <el-table-column label="岗位类型" align="center" prop="postType" />

            <el-table-column label="工作时长" align="center">
                <template v-slot="{ row }">
                    {{ row.postType == "固定岗位A" ? row.totalTime + "天" : row.totalTime + "小时" }}
                </template>
            </el-table-column>
            <el-table-column label="结算月份" align="center">
                <template v-slot="{ row }">
                    {{ formatDate(row.applyTime) }}
                </template>
            </el-table-column>
            <!-- <el-table-column label="薪资" align="center" prop="applyStatus">
                <template slot-scope="scope">
                    {{ scope.row.postType == "固定岗位A" ? "待部门导出查看" : scope.row.totalTime * 15 }}
                </template>
            </el-table-column> -->
            <el-table-column label="审核状态" align="center" prop="applyStatus">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.qgzx_apply_status" :value="scope.row.applyStatus" />
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.applyStatus == '0'" size="mini" type="text" icon="el-icon-edit"
                        @click="editVClick(scope.row)">修改</el-button>
                    <el-button v-if="scope.row.applyStatus == '0' || scope.row.applyStatus == '1'" size="mini"
                        type="text" icon="el-icon-close" @click="cancelApply(scope.row)">取消申请</el-button>
                    <el-button v-if="scope.row.applyStatus != '0'" size="mini" type="text" icon="el-icon-view"
                        @click="lookVClick(scope.row)">查看</el-button>
                    <el-button v-if="scope.row.applyStatus == '11'" size="mini" type="text" icon="el-icon-refresh"
                        @click="reVClick(scope.row)">重新提交</el-button>
                </template>
            </el-table-column>
        </el-table>



        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <el-dialog title="薪资填报" :visible.sync="editV">
            <el-form size="mini" label-width="148px">
                <el-form-item label="学生">
                    <TeacherOwnStuPostSelect v-model="applyForm.stuPostId" />
                </el-form-item>
                <el-form-item label="月份">
                    <el-date-picker clearable v-model="applyForm.applyTime" type="month" value-format="yyyy-MM-dd"
                        placeholder="请选择结算月份">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="个人签章">
                    <el-upload :limit="1" class="avatar-uploader" :action="upload.url" :headers="upload.headers"
                        :show-file-list="false" :on-success="handleAvatarSuccess">
                        <img v-if="applyForm.applySign" :src="baseurl + applyForm.applySign" width="200px" height="50px"
                            class="avatar">
                        <span v-else> 点击上传</span>
                    </el-upload>
                </el-form-item>
                <el-form-item label="">
                    <el-button @click="doApply">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="查看" :visible.sync="lookV">
            <el-steps :active="getStep(lookForm)">
                <el-step title="指导老师填报薪资" description=""></el-step>

                <el-step title="部门领导审批" :status="isEmpty(lookForm.deptCmt) ? 'wait' : getStepStatus(lookForm.deptCmt)">
                    <template slot="description">
                        <div>
                            {{ isEmpty(lookForm.deptNoName) ? '' : lookForm.deptNoName }}
                        </div>
                        <div>
                            {{ isEmpty(lookForm.deptCmt) ? '' : lookForm.deptCmt }}
                        </div>
                        <div>
                            {{ isEmpty(lookForm.deptTime) ? '' : lookForm.deptTime }}
                        </div>
                    </template>
                </el-step>
                <el-step title="资助办领导审批" :status="isEmpty(lookForm.highCmt) ? 'wait' : getStepStatus(lookForm.highCmt)">
                    <template slot="description">
                        <div>
                            {{ isEmpty(lookForm.highName) ? '' : lookForm.highName }}
                        </div>
                        <div>
                            {{ isEmpty(lookForm.highCmt) ? '' : lookForm.highCmt }}
                        </div>
                        <div>
                            {{ isEmpty(lookForm.highTime) ? '' : lookForm.highTime }}
                        </div>
                    </template>
                </el-step>

                <el-step title="学工领导审批"
                    :status="isEmpty(lookForm.finalCmt) ? 'wait' : getStepStatus(lookForm.finalCmt)">
                    <template slot="description">
                        <div>
                            {{ isEmpty(lookForm.finalName) ? '' : lookForm.finalName }}
                        </div>
                        <div>
                            {{ isEmpty(lookForm.finalCmt) ? '' : lookForm.finalCmt }}
                        </div>
                        <div>
                            {{ isEmpty(lookForm.finalTime) ? '' : lookForm.finalTime }}
                        </div>
                    </template>
                </el-step>
            </el-steps>
            <hr />
            <el-form class="lookForm" size="mini" label-width="148px">
                <el-form-item label="学生">
                    <el-input v-model="lookForm.stuName" readonly />
                </el-form-item>
                <el-form-item label="岗位">
                    <el-input v-model="lookForm.postName" readonly />
                </el-form-item>
                <el-form-item label="总工作时长">
                    <el-input v-model="lookForm.totalTime" readonly />
                </el-form-item>
                <el-form-item label="个人签章">
                    <img v-if="lookForm.applySign" :src="baseurl + lookForm.applySign" width="200px" height="50px"
                        class="avatar">
                </el-form-item>
                <div v-if="!isEmpty(lookForm.auditRemark)">
                    <hr />
                    <el-form-item label="审核备注">
                        <el-input type="textarea" v-model="lookForm.auditRemark" readonly />
                    </el-form-item>
                </div>
                <hr />
                <el-form-item label="部门意见" v-if="!isEmpty(lookForm.deptCmt)">
                    <el-input v-model="lookForm.deptCmt" />
                </el-form-item>
                <el-form-item label="部门签章" v-if="!isEmpty(lookForm.deptSign)">
                    <img v-if="lookForm.deptSign" :src="baseurl + lookForm.deptSign" width="200px" height="50px"
                        class="avatar">
                </el-form-item>
                <hr />
                <el-form-item label="资助办意见" v-if="!isEmpty(lookForm.highCmt)">
                    <el-input v-model="lookForm.highCmt" />
                </el-form-item>
                <el-form-item label="资助办签章" v-if="!isEmpty(lookForm.highSign)">
                    <img v-if="lookForm.highSign" :src="baseurl + lookForm.highSign" width="200px" height="50px"
                        class="avatar">
                </el-form-item>
                <hr />
                <el-form-item label="学工处意见" v-if="!isEmpty(lookForm.finalCmt)">
                    <el-input v-model="lookForm.finalCmt" />
                </el-form-item>
                <el-form-item label="学工处签章" v-if="!isEmpty(lookForm.finalSign)">
                    <img v-if="lookForm.finalSign" :src="baseurl + lookForm.finalSign" width="200px" height="50px"
                        class="avatar">
                </el-form-item>

            </el-form>
        </el-dialog>


        <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="manyV" title="批量填报">
            <el-button type="success" size="mini" @click="doMany">批量填报</el-button>
            <el-date-picker clearable v-model="manyApplyTime" type="month" value-format="yyyy-MM-dd"
                placeholder="请选择结算月份">
            </el-date-picker>
            <el-table @selection-change="handleManySelectionChange" :data="manyList">
                <el-table-column type="selection" width="55" />

                <el-table-column label="#" align="center" prop="id" />
                <el-table-column label="学号" align="center" prop="stuNo" />
                <el-table-column label="姓名" align="center" prop="stuName" />
                <el-table-column label="性别" align="center" prop="gender" />
                <el-table-column label="学院" align="center" prop="stuDept" />

                <el-table-column label="岗位名称" align="center" prop="postName" />
                <el-table-column label="设岗部门" align="center" prop="deptName" />
            </el-table>

            <pagination v-show="manyTotal > 0" :total="manyTotal" :page.sync="manyQuery.pageNum"
                :limit.sync="manyQuery.pageSize" @pagination="listTeacherCanSelectPost" />

        </el-dialog>


        <el-dialog title="重新提交" :visible.sync="replyV">
            <el-form class="lookForm" size="mini" label-width="148px">
                <el-form-item label="学生">
                    <el-input v-model="replyForm.stuName" readonly />
                </el-form-item>
                <el-form-item label="岗位">
                    <el-input v-model="replyForm.postName" readonly />
                </el-form-item>
                <el-form-item label="总工作时长">
                    <el-input v-model="replyForm.totalTime" type="number" />
                </el-form-item>
                <el-form-item label="个人签章">
                    <img v-if="replyForm.applySign" :src="baseurl + replyForm.applySign" width="200px" height="50px"
                        class="avatar">
                </el-form-item>
                <el-form-item label="">
                    <el-button size="mini" @click="doReply">重新提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>
<script>

import { CheckImgExists, fullLoading, isEmpty } from "@/api/helpFunc";
import TeacherOwnStuPostSelect from "@/views/workstudy/components/TeacherOwnStuPostSelect";

import { getOwnSign } from "@/api/workstudy/post";
import { getToken } from "@/utils/auth";


import { cancelApply, doApply, doMany, listOwnApply as getList, doReply } from "@/api/workstudy/money";

import { listTeacherCanSelectPost } from "@/api/workstudy/stuPost";

export default {
    name: "Money",
    dicts: ['qgzx_apply_status'],
    components: { TeacherOwnStuPostSelect },
    data() {
        return {
            editV: false,
            applyForm: {
                stuPostId: null
            },
            upload: {
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/common/upload"
            },
            baseurl: process.env.VUE_APP_BASE_API + "/",
            isEmpty,
            loading: false,

            tableData: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                postName: null
            },
            lookForm: {},

            lookV: false,

            manyV: false,

            manyList: [],
            manyTotal: 0,
            manyQuery: {
                pageNum: 1,
                pageSize: 10,
            },

            manyIds: [],
            manyApplyTime:new Date(),


            replyV: false,
            replyForm: {}, //重新提交表单
        }
    },
    created() {
        this.getList();
    },
    methods: {

        async doReply() {
            let sdata = { ...this.replyForm };
            if (isEmpty(sdata.totalTime) || sdata.totalTime == 0) {
                this.$message.info("请填写总工作时长");
                return;
            }

            let loading = fullLoading(this);
            let res = await doReply(sdata);
            loading.close();
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.replyV = false;
                this.getList();
            }
        },


        //此方法为表格中重新提交按钮的点击事件
        async reVClick(row) {
            this.replyForm = {};
            this.replyForm = { ...row };
            this.replyV = true;
        },


        formatDate(dateStr) {
            const date = new Date(dateStr);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以需要+1
            return `${year}年${month}月`;
        },
        //此方法用于判断步骤条当前步骤的状态
        getStepStatus(data) {
            if (data == "同意") {
                return 'success';
            } else {
                return 'error';
            }
        },

        //此方法用于判断步骤条到哪个步骤了
        getStep(data) {
            if (!isEmpty(data.deptCmt)) { //判断部门领导有没有审批
                return 2;
            } else if (!isEmpty(data.highCmt)) { //判断资助办有没有审批
                return 3;
            } else if (!isEmpty(data.finalCmt)) { //判断学工处有没有审批
                return 4;
            } else {
                return 1;
            }
        },
        doMany() {
            if (isEmpty(this.manyIds)) {
                this.$message.info("请选择需要批量填报的记录");
                return;
            }
            if(isEmpty(this.manyApplyTime)){
                this.$message.info("请选择结算月份");
                return;
            }
            let sdata = [...this.manyIds];
            this.$confirm('您确定要批量填报吗，之前已经填报的记录不会再次填报, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let loading = fullLoading(this);
                let res = await doMany(sdata,this.manyApplyTime);
                loading.close();
                if (res.code == 200) {
                    this.$message.success(res.msg);
                    this.getList();
                }
            }).catch(() => {

            });
        },
        handleManySelectionChange(val) {
            this.manyIds = val.map(x => x.id);
        },
        async listTeacherCanSelectPost() {
            let loading = fullLoading(this);
            let res = await listTeacherCanSelectPost(this.manyQuery);
            loading.close();
            if (res.code == 200) {
                this.manyList = [...res.rows];
                this.manyTotal = res.total;
            }

        },
        manyVClick() {
            this.listTeacherCanSelectPost();
            this.manyV = true;
        },

        lookVClick(row) {
            this.lookForm = {};
            this.lookForm = { ...row };
            this.lookV = true;
        },
        cancelApply(row) {
            let id = row.id;
            this.$confirm('您确定要取消申请吗, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let loading = fullLoading(this);
                let res = await cancelApply(id);
                loading.close();
                if (res.code == 200) {
                    this.$message.success(res.msg);
                    this.getList();
                }
            }).catch(() => {

            });
        },

        async getList() {
            this.loading = true;
            let res = await getList(this.queryParams);
            this.loading = false;
            if (res.code == 200) {
                this.tableData = [...res.rows];
                this.total = res.total;
            }
        },
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },

        doApply() {
            let sdata = { ...this.applyForm };
            if (isEmpty(sdata.stuPostId)) {
                this.$message.info("请选择学生");
                return;
            }
            if (isEmpty(sdata.applySign)) {
                this.$message.info("请上传个人签章");
                return;
            }

            if(isEmpty(sdata.applyTime)){
                this.$message.info("请选择结算月份");
                return;
            }

            if (!CheckImgExists(this.baseurl + sdata.applySign)) {
                this.$message.info("签名失效，请重新上传");
                return;
            }

            this.$confirm('每月只能填报一次，您确定要结算吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let loading = fullLoading(this);
                let res = await doApply(sdata);
                loading.close();
                if (res.code == 200) {
                    this.getList();
                    this.$message.success(res.msg);
                    this.editV = false;
                }
            }).catch(() => {

            });
        },
        async addVClick() {
            this.applyForm = {};

            let loading = fullLoading(this);
            let res = await getOwnSign();
            loading.close();
            if (res.code == 200) {
                let data = { ...res.data };
                if (isEmpty(data.signature)) {
                    this.$confirm('您的签名尚未上传', '提示', {
                        confirmButtonText: '点我前往',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$router.push("/user/profile")
                    }).catch(() => {

                    });
                } else {
                    this.applyForm.applySign = data.signature;
                    this.editV = true;
                }
            }
        },
        handleAvatarSuccess(response, file, fileList) {
            this.applyForm.applySign = response.fileName;
            this.$forceUpdate();
        },
    }
}


</script>

<style scoped lang="scss">
.lookForm {
    .el-form-item {
        margin-bottom: 5px;
    }
}
</style>